<template>
	<base-page @scrollCall="scrollIndex" @lowerCall="lowerIndex" :downloadType="headerShow">
		<cu-custom slot="header" v-if="headerShow" :isBack="true" :backCallType="true" @cuBack="detailBackBtn"
			bgColor="bg-orange-red">
			<block slot="content">
				<view class="line-text" v-if="dataObj != null">{{ goodsDetail.sku_name }}</view>
			</block>
		</cu-custom>
		<view slot="center" class="goods-detail">
			<view :style="{ top: StatusBar + 'px' }" style="position: fixed;z-index: 999;width: 100%;top: 0;"
				v-if="!headerShow">
				<download-app></download-app>
				<view class="index-header" :style="{ paddingTop: '5px' }">
					<button class="cu-btn cuIcon index-header-icon" @click="detailBackBtn">
						<image :src="staticImgUrl + 'shop/detail-back.png'" mode="" style="width: 100%;height: 100%;">
						</image>
					</button>
					<block v-if="dataObj">
						<!-- #ifdef MP-WEIXIN -->
						<button class="cu-btn cuIcon index-header-icon" @click="scollectBtn">
							<image
								:src="collection_type == 0 ? staticImgUrl + 'shop/detail-collection.png' : staticImgUrl + 'shop/ativer-collection.png'"
								mode="" style="width: 100%;height: 100%;"></image>
						</button>
						<button class="cu-btn cuIcon index-header-icon" @click="shareBtn">
							<image :src="staticImgUrl + 'shop/detail-share.png'" mode=""
								style="width: 100%;height: 100%;" v-if="dataObj"></image>
						</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="df-ai-cen">
							<button class="cu-btn cuIcon index-header-icon" @click="scollectBtn">
								<image
									:src="collection_type == 0 ? staticImgUrl + 'shop/detail-collection.png' : staticImgUrl + 'shop/ativer-collection.png'"
									mode="" style="width: 100%;height: 100%;"></image>
							</button>
							<button class="cu-btn cuIcon index-header-icon" @click="shareBtn">
								<image :src="staticImgUrl + 'shop/detail-share.png'" mode=""
									style="width: 100%;height: 100%;"></image>
							</button>
						</view>
						<!-- #endif -->
					</block>
				</view>
			</view>
			<block v-if="dataObj">
				<!-- 轮播图 -->
				<block>
					<goods-swiper :list="swiperImgList" :videoUrl="dataObj.goods_info.video_url"></goods-swiper>
				</block>
				<block>
					<view class="countDownBox df-ai-cen bg-orange-red">
						<view class="margin-right">活动倒计时</view>
						<view class="df-ai-cen" v-if="tiemObj.hh != ''">
							<block v-if="tiemShow">
								<view class="tiem-item">{{ tiemObj.hh }}</view>
								<view class="tiem-fuhao">:</view>
								<view class="tiem-item">{{ tiemObj.mm }}</view>
								<view class="tiem-fuhao">:</view>
								<view class="tiem-item">{{ tiemObj.ss }}</view>
							</block>
							<block v-else>
								<view class="end-box">已结束</view>
							</block>
						</view>
					</view>
					<view class="goods-detail-top">
						<view class="goods-title" style="margin-top: 0;">{{ goodsDetail.sku_name }}</view>
						<view class="goods-describe">{{ goodsDetail.introduction }}</view>
						<view class="df-cen-rl">
							<view class="df goods-price-box">
								<view class="goods-price margin-right">
									<text style="font-size: 32rpx;">￥</text>
									{{ goodsDetail.topic_price }}
								</view>
								<view>
									<view class="goods-original-price">￥{{ goodsDetail.price }}</view>
									<view class="slightly-red"
										v-if="(Number(goodsDetail.price) - Number(goodsDetail.topic_price)).toFixed(2)>0">
										抢购立省￥{{ (Number(goodsDetail.price) - Number(goodsDetail.topic_price)).toFixed(2) }}
									</view>
								</view>
							</view>
							<view class="slightly-red" v-if="goodsDetail.sale_num > 50">已抢：{{ goodsDetail.sale_num }}件
							</view>
						</view>
					</view>
				</block>
				<!-- 评论 -->
				<block>
					<goods-evaluate class="mb-10" :list="evaluateList" :totals="evaluateCount"
						@showContent="showContent" @scrolltolower="scrolltolower"></goods-evaluate>
				</block>
				<!-- 商家 -->
				<block v-if="shopObj != null">
					<view class="mb-10 shop-box">
						<view class="df-ai-cen">
							<view class="cu-avatar xl round margin-right"
								:style="{ backgroundImage: 'url(' + $Utils.img(shopObj.avatar) + ')' }"></view>
							<view>
								<view class="shop-title">{{ shopObj.site_name }}</view>
								<view class="df-ai-cen">
									<text class="shop-pingfen">商品描述{{ shopObj.shop_desccredit }}</text>
									<text class="shop-pingfen">商家服务{{ shopObj.shop_servicecredit }}</text>
									<text class="shop-pingfen">发货速度{{ shopObj.shop_deliverycredit }}</text>
								</view>
							</view>
						</view>
						<view class="df-cen margin-top">
							<button class="cu-btn round lines-red margin-lr" @click="jumpShop">全部商品</button>
							<button class="cu-btn round lines-red margin-lr" @click="jumpShop">查看店铺</button>
						</view>
					</view>
				</block>
				<!-- 售后保证 -->
				<block>
					<view class="goods-rich-box mb-10">
						<view class="df-cen rich-box-header">
							<view class="rich-btn df-col-cen" @click="richBtn(0)">
								图文详情
								<view class="rich-btn-line" :class="richInx == 0 ? 'rich-btn-ativer' : ''"></view>
							</view>
							<view class="rich-btn df-col-cen" @click="richBtn(1)">
								售后保障
								<view class="rich-btn-line" :class="richInx == 1 ? 'rich-btn-ativer' : ''"></view>
							</view>
						</view>
						<view style="padding: 20rpx;overflow-x: hidden;">
							<view class="xcImg" @click="toadvurl">
								<image :src="advImg" mode="widthFix"></image>
							</view>
							<rich-text :nodes="goodsDetail.goods_content" v-if="richInx == 0"></rich-text>
							<rich-text :nodes="aftersales" v-if="richInx == 1"></rich-text>
						</view>
					</view>
				</block>
				<!-- 推荐商品 -->
				<block>
					<view class="">
						<view class="cnxhicon">
							<image :src="staticImgUrl + 'youlikes.png'" mode=""></image>
						</view>
						<view style="padding: 20rpx;">
							<goods-waterfall-flow :allList="goodsList" @goodsFlowCall="goodsFlowBtn">
							</goods-waterfall-flow>
						</view>
						<view class="cu-load over" v-if="page_count && recommendObj.page >= page_count"></view>
					</view>
				</block>
			</block>
		</view>
		<view slot="below" v-if="bottomType">
			<block v-if="goodsDetail.goods_state == 1">
				<view class="cu-bar bg-white tabbar border shop shadow-blur">
					<view class="action" @click="jumpCall(0)">
						<view class="cuIcon-shop"></view>
						店铺
					</view>
					<view class="action" @click="toStoreim(goodsDetail)">
						<view class="cuIcon-service"></view>
						客服
					</view>
					<view class="action" @click="jumpCall(2)">
						<view class="cuIcon-cart">
							<view class="cu-tag badge" v-if="catrCount">{{ catrCount }}</view>
						</view>
						购物车
					</view>
					<view class="btn-group"><button class="cu-btn bg-orange-red round shadow-blur"
							@click="immediatelyPurchase" style="width: 90%;">立即抢购</button></view>
				</view>
			</block>
			<block v-if="showFenXiang==true">
				<fenxiang @closeFx="closeFx" :sku_id="goodsDetail.sku_id" :type='0'></fenxiang>
			</block>
			<bottom-popup :showType="showTypeT" :headerType="false" @cancel="popupCanclFn" bgColor='#ffffff'>
				<view slot="content" class="pay-popup-content">
					<view class="pay-popup-header df-cen-rl">
						<view class="popup-header-title" style="padding-left: 20rpx;padding-top: 20rpx;">评价</view>
						<view @click="popupCanclFn"><text class="lg text-gray cuIcon-roundclosefill"
								style="font-size: 40rpx;padding-right: 20rpx;"></text></view>
					</view>
					<view style="padding: 20rpx;" v-if="showContentInfo!=null">
						<view>{{showContentInfo.member_name}}：{{showContentInfo.content}}</view>
					</view>
				</view>
			</bottom-popup>
			
		</view>
		<!-- #ifdef H5 -->
		<block v-if="!isNativeApp() && shareContent != null">
			<wx-config :shareContent="shareContent"></wx-config>
		</block>
		<!-- #endif -->

	</base-page>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import fenxiang from '@/components/global/fenxiang.vue'
	import GoodsSwiper from '@/publicPages/components/detail/swiper.vue'; // 轮播图组件
	import GoodsEvaluate from '@/publicPages/components/detail/evaluate.vue'; // 评论组件
	import GoodsWaterfallFlow from '@/components/global/goods-waterfall-flow.vue';
	import Detail from '@/publicPages/common/js/detail.js';
	// #ifdef H5
	import wxConfig from '@/components/global/wx-config.vue';
	// #endif
	export default {
		mixins: [Detail],
		name: 'discountdetails',
		data() {
			return {showContentInfo:null,
				showTypeT: false,
				bottomType: true,
				collectType: false,
				StatusBar: this.StatusBar,
				headerShow: false,
				goodsId: null,
				dataObj: null,
				goodsDetail: {}, // 商品info
				swiperImgList: [], // 轮播图
				evaluateList: [], // 评价列表
				evaluateCount: 0, // 评价数量
				skuType: false,
				skuList: [], // sku表格
				selectedArr: [], // 选中的sku集
				shopObj: {}, // 商铺信息
				aftersales: '', // 售后保障
				richInx: 0,
				goodsList: [],
				recommendObj: {
					page: 1,
					page_size: 10
				},
				page_count: null, // 总页数
				recommendType: false,
				couponList: [], // 优惠卷列表
				addCatr: true,
				catrCount: 0, // 购物车数量
				jumpList: [{
						path: '/pages/index/index',
						key: 'reLaunch'
					},
					{
						path: '/chatPages/index/index',
						key: 'push'
					},
					{
						path: '/shopPages/goods/cart',
						key: 'push'
					}
				],
				tiemDownBox: null,
				tiemObj: {
					hh: '',
					mm: '',
					ss: ''
				},
				tiemShow: false,
				advImg: '',
				showFenXiang: false,
				fxsku_id: '',
				pagePj:1
			};
		},
		components: {
			fenxiang,
			GoodsSwiper,
			GoodsEvaluate,
			GoodsWaterfallFlow
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLoad(e) {
			this.advImg = uni.getStorageSync('advImg');
			this.$Router.query().then(res => {
				this.goodsId = Number(res.id) || Number(res.sku_id) || Number(res.scene);
				this.$Apis
					.topicgoods({
						id: Number(res.id) || Number(res.sku_id) || Number(res.scene)
					})
					.then(success => {
						// console.log("success=>", success)
						this.dataObj = success;
						this.setGoodsBrowse(success.goods_sku_detail.goods_id, success.goods_sku_detail.sku_id,
							success.goods_sku_detail.category_id, success.goods_sku_detail.category_id_1,
							success.goods_sku_detail.category_id_2, success.goods_sku_detail.category_id_3,
							success.goods_sku_detail.site_id)
						this.goodsDetail = success.goods_sku_detail;
						this.shopObj = success.shop_info;
						// 获取规格组合
						if (success.goods_sku_detail.goods_spec_format) {
							this.skuList = JSON.parse(success.goods_sku_detail.goods_spec_format);
						}
						// 处理规格标题
						if (success.goods_sku_detail.sku_spec_format) {
							let newSkuTitleArr = JSON.parse(success.goods_sku_detail.sku_spec_format);
							this.selectedArr = newSkuTitleArr;
						}
						this.goodsDetail.goods_content = this.goodsDetail.goods_content.replace(/<img/g,
							"<img style='width:100%'");
						this.swiperImgList = success.goods_sku_detail.sku_images.split(',');
						let endTime = new Date(this.$Utils.formatDate(new Date(), true, '/')).getTime() + this
							.goodsDetail.end_time * 1000;
						if (this.$Utils.countdown(endTime)) {
							this.tiemObj = this.$Utils.countdown(endTime);
							this.tiemShow = true;
							// 做判断当倒计时结束时都为0
							this.tiemDownBox = setInterval(() => {
								if (this.$Utils.countdown(endTime)) {
									this.tiemObj = this.$Utils.countdown(endTime);
								} else {
									this.tiemShow = false;
									clearInterval(this.tiemDownBox);
								}
							}, 1000);
						}
						this.init(res);
					});
			});
		},
		onShow(e) {},
		onUnload() {
			clearInterval(this.tiemDownBox);
		},
		onHide() {
			this.showFenXiang = false
		},
		methods: {
			scrolltolower(e) {
				console.log("e=>", e)
				let page = this.pagePj
				page++
				// 获取评论
				this.$Apis.getGoodseValuate({
					goods_id: this.goodsDetail.goods_id,
					page: page,
					page_size: 10
				}).then(success => {
					console.log(success);
					console.log(this.evaluateList)
					this.pagePj = page
					this.evaluateList = this.evaluateList.concat(success.list.map(v => {
						v['imgList'] = v.images.split(',');
						return v;
					}))
				});
			},
			closeFx(e) {
				this.showFenXiang = e
			},
			toadvurl() {
				if (!uni.getStorageSync('advImgurl')) return

				// #ifdef MP-WEIXIN
				uni.setStorageSync('weburl', uni.getStorageSync('advImgurl'));
				this.$Router.push({
					path: '/publicPages/activity/outerchain',
					query: {
						name: '详情'
					}
				});
				// #endif

				// #ifdef H5
				location.href = uni.getStorageSync('advImgurl')
				// #endif
			},
			getTiemDown() {
				// countdown
				this.tiemObj = this.$Utils.countdown(new Date(this.$Utils.formatDate(new Date(), true, '/')).getTime() +
					this.goodsDetail.end_time * 1000);
			},
			scrollIndex(e) {
				if (e.detail.scrollTop > 260) {
					this.headerShow = true;
				} else {
					this.headerShow = false;
				}
			},
			lowerIndex(e) {
				if (this.recommendType) return false;
				this.recommendType = true;
				this.recommendObj.page++;
				this.getGoodsList();
			},
			init(res) {
				// 获取评论
				this.$Apis.getGoodseValuate({
					goods_id: this.goodsDetail.goods_id,
					page: 1,
					page_size: 10
				}).then(success => {
					this.evaluateList = success.list.map(v => {
						v['imgList'] = v.images.split(',');
						return v;
					});
					this.evaluateCount = success.count;
					this.pagePj = 1
				});
				// 获取售后保证
				this.$Apis.getAftersale().then(res => {
					this.aftersales = res.content;
				});
				// 获取推荐商品
				this.getGoodsList();
				// 获取购物侧
				this.$Apis.getCartCount().then(sucess => {
					this.catrCount = sucess;
				});
			},
			richBtn(inx) {
				this.richInx = inx;
			},
			// 获取推荐商品
			getGoodsList() {
				if (!this.page_count || (this.page_count && this.recommendObj.page < this.page_count)) {
					this.$Apis.getGoodsSkuRecommend(this.recommendObj).then(res => {
						this.recommendType = false;
						this.page_count = res.page_count;
						this.goodsList = this.goodsList.concat(res.list);
						console.log('log.goodsListgoodsList', res, this.goodsList.length, this.page_count);
					});
				}
			},
			// 商品瀑布流回调
			goodsFlowBtn(item) {
				this.$Router.push({
					path: '/shopPages/goods/detail',
					query: {
						goods_id: item.sku_id,
						is_id: item.sku_id,
						type: 1
					}
				});
			},
			skuCancalCall() {
				this.skuType = false;
				this.bottomType = true;
			},
			// 加入购物车回调
			skuConfimCall(obj) {
				this.skuType = false;
				this.bottomType = true;
				this.$Apis.getCartAdd({
					...obj,
					site_id: this.shopObj.site_id
				}).then(res => {
					this.$Apis.getCartCount().then(sucess => {
						this.catrCount = sucess;
					});
				});
			},
			// 立即抢购
			immediatelyPurchase() {
				if (this.goodsDetail.stock == 0) {
					this.$Utils.tip('~该商品没有库存啦~')
					return false
				}
				if (!this.$Utils.isLoginCall()) return false;
				if (!this.tiemShow) {
					this.$Utils.tip('活动已结束');
					return false;
				}
				this.$Router.push({
					path: '/payPages/goods/markednesspay',
					query: {
						sku_id: this.goodsDetail.id
					}
				});
			},
			// 返回页面
			detailBackBtn() {
				this.$Utils.compatiBleJump({
					key: 'exit'
				}, 1);
			},
			// 跳转店铺
			jumpShop() {
				this.$Router.push({
					path: '/shopPages/shop/shop',
					query: {
						site_id: this.shopObj.site_id
					}
				});
			},
			jumpCall(inx) {
				if (!this.$Utils.isLoginCall() && inx != 0) return false;
				// #ifdef H5
				if (inx === 0) {
					this.$Router.push({
						path: '/shopPages/shop/shop',
						query: {
							site_id: this.shopObj.site_id
						}
					});
					// if (this.isNativeApp()) {
					// 	this.$Sdk.jumpHome();
					// } else {
					// 	this.$Router[this.jumpList[inx].key]({
					// 		path: this.jumpList[inx].path
					// 	});
					// }
					return false;
				}
				// #endif
				// #ifdef MP-WEIXIN
				if (inx === 0) {
					this.$Router.push({
						path: '/shopPages/shop/shop',
						query: {
							site_id: this.shopObj.site_id
						}
					});
					// if (this.isNativeApp()) {
					// 	this.$Sdk.jumpHome();
					// } else {
					// 	this.$Router[this.jumpList[inx].key]({
					// 		path: this.jumpList[inx].path
					// 	});
					// }
					return false;
				}
				// #endif
				this.$Router[this.jumpList[inx].key]({
					path: this.jumpList[inx].path
				});
			},
			// 跳转客服聊天
			toStoreim(item) {
				console.log(item)
				this.$Router.push({
					path: '/chatPages/storeim/storeim',
					query: {
						site_id: item.site_id,
						sku_id: item.sku_id
					}
				});
			},
			// 弹出取消
			popupCanclFn() {
				this.showTypeT = false;
				this.showContentInfo = null
			},
			showContent(item) {
				console.log("item", item)
				this.showTypeT = true;
				this.showContentInfo = item
			}
		},
		mounted() {},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			let pathObj = this.$Router.queryObj();
			var title = this.goodsDetail.sku_name;
			var path = '/publicPages/discountdetails/discountdetails?id=' + pathObj.id + '&source_member=' + this
				.userInfo.member_id;
			var imageUrl = this.goodsDetail.sku_image;
			return {
				title: title,
				path: path,
				imageUrl: imageUrl
			};
		},
		onShareTimeline(res) {
			let pathObj = this.$Router.queryObj();
			var title = this.goodsDetail.sku_name;
			var path = '/publicPages/discountdetails/discountdetails?id=' + pathObj.id + '&source_member=' + this
				.userInfo.member_id;
			var imageUrl = this.goodsDetail.sku_image;
			return {
				title: title,
				path: path,
				imageUrl: imageUrl
			};
		},
	};
</script>

<style lang="scss">
	@import '../common/css/detail.scss';

	.cnxhicon {
		width: 662rpx;
		height: 198rpx;
		margin: 0 auto;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.countDownBox {
		padding: 20rpx;

		.tiem-item {
			margin: 0 4rpx;
			border-radius: 6rpx;
			padding: 6rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}

		.tiem-fuhao {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}

		.end-box {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #666666;
			padding: 6rpx 20rpx;
		}
	}

	.xcImg {
		width: 100%;
		// height: 283rpx;
		margin-bottom: 10rpx;
	}

	.xcImg image {
		width: 100%;
		height: 100%;
	}
</style>
